<template>
	<view class="container">
		<view class="order-info">
			<view class="mb-30 bg-white border-radius-10">
				<view class="padding-30" v-for="(item, index) in orderedList" :key="item.id">
					<view class="flex w-100">
						<image class="width-88 height-88 shrink0 mr-10" :src="item.image"></image>
						<view class="w-100 flex justify-between">
							<view class="w-100">
								<view class="fsize-28">{{ item.name }}</view>
								<view class="fsize-24 line-gray" v-if="item.itemType !== 2">{{ item.specName ? item.specName : '' }} {{ item.taskTitle }}</view>
								<view class="fsize-24 line-gray" v-else>
									{{ detailList[index].map((v) => v.foodName + '× ' + v.quantity) }}
								</view>
							</view>
							<view class="flex flex-column justify-between shrink0 ml-10 text-align-right">
								<view>
									<text class="fsize-20">￥</text>
									<text class="fsize-24" style="margin-right: 10rpx">{{ item.allAmount }}</text>
								</view>
								<text class="fsize-26 line-gray">x{{ item.quantity }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="info-content">
				<view>
					<view>消费金额</view>
					<view>￥{{ costPrice }}</view>
				</view>

				<view style="color: #ec7f58">
					<view>优惠金额</view>
					<view>- ￥ {{ master.couponReduceAmount || 0 }}</view>
				</view>
				<!-- <view>
          <view>其他优惠</view>
          <view>{{
            !coupon.id ? "￥0.00" : "-￥ " + coupon.reduceAmount
          }}</view>
        </view> -->
			</view>

			<view class="info-footer">
				<view>
					小计：
					<text style="color: #ec7f58">￥{{ master.sumAllAmount || 0 }}</text>
				</view>
			</view>
		</view>

		<view class="pay-order">
			<!-- <view>
        <view>优惠券</view>
        <view
          v-if="!coupon.id"
          @click="
            $u.route('/pages/user/coupon/coupon', {
              tickets: JSON.stringify(couponList),
            })
          "
          style="display: flex"
          >{{ couponLength > 0 ? couponLength + "张" : "暂无可用"
          }}<u-icon name="arrow-right" size="18"></u-icon
        ></view>

        <view
          v-else
          @click="
            $u.route('/pages/user/coupon/coupon', {
              tickets: JSON.stringify(couponList),
            })
          "
          style="display: flex; color: #e86162"
        >
          -￥{{ coupon.reduceAmount
          }}<u-icon name="arrow-right" size="18" color="#d2d2d2"></u-icon
        ></view>
      </view> -->

			<view>
				<view>账户余额</view>
				<view>{{ balance }}元</view>
			</view>

			<view style="display: flex; justify-content: flex-end" v-if="!userInfo.id">
				<u-icon label="登录会员领取更多优惠" labelPos="left" name="arrow-right" @click="$u.route('/pages/login/login')"></u-icon>
			</view>

			<text style="display: block; margin: 10rpx 0 10rpx; font-size: 24rpx; color: #adadad">支付方式</text>
			<view class="pay-method" v-for="(item, index) in systemInfo.hostName === 'alipay' ? payMethodsAlipay : payMethods" :key="item.value">
				<u-icon :label="item.label" :name="item.name" :color="item.color" size="22"></u-icon>
				<u-icon v-if="item.isShow" :name="item.isPayMethod ? item.selected : item.unSelected" color="#a78851" size="22" @click="onCheckPay(index)"></u-icon>
				<view v-else style="display: flex; align-items: center" @click="onVoucher">
					余额不足，请充值
					<image class="width-30 height-30 shrink0" src="../../static/images/my/icon_arrow.png"></image>
				</view>
			</view>

			<view style="margin-top: 20rpx; padding: 0 20rpx; height: 100rpx; border: 1px solid #f5f5f5; border-radius: 10rpx">
				<view class="w-100 flex justify-between align-center">
					<text class="fsize-28">备注</text>
					<view class="flex align-center">
						<text class="fsize-24 mr-10" v-if="!remark">--</text>
						<text class="fsize-24 mr-10" v-else-if="remark && remark.length < 5">{{ remark }}</text>
						<text class="fsize-24 mr-10" v-else>{{ remark.substring(0, 5) }}...</text>
					</view>
				</view>
			</view>
		</view>

		<view class="footer">
			<!-- 点击下单，跳转到订单详情界面 order/detail-->
			<view>
				<button style="border-radius: 45rpx" type="primary" disabled v-if="!payment_code">选择支付方式</button>
				<button class="button" @click="createOrder" v-else>支付</button>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import { pay } from '@/common/util.js';
import common from '@/common/util.js';
export default {
	data() {
		return {
			systemInfo: common.getSystemInfo(),
			remark: '',
			orderId: 0,
			payMethods: [
				{
					label: '微信支付',
					value: 'wechatpay',
					name: 'weixin-fill',
					selected: 'checkmark-circle-fill',
					unSelected: 'checkmark-circle',
					color: '#51b133',
					isPayMethod: false,
					isShow: true
				},
				{
					label: '余额支付',
					value: 'balancepay',
					name: 'rmb',
					selected: 'checkmark-circle-fill',
					unSelected: 'checkmark-circle',
					color: '#51b133',
					isPayMethod: false,
					isShow: false
				}
			],
			payMethodsAlipay: [
				{
					label: '支付宝支付',
					value: 'alipay',
					name: 'zhifubao',
					selected: 'checkmark-circle-fill',
					unSelected: 'checkmark-circle',
					color: '#409eff',
					isPayMethod: false,
					isShow: true
				},
				{
					label: '余额支付',
					value: 'balancepay',
					name: 'rmb',
					selected: 'checkmark-circle-fill',
					unSelected: 'checkmark-circle',
					color: '#51b133',
					isPayMethod: false,
					isShow: false
				}
				// {label:'支付宝支付',value:'alipay',name:'zhifubao',selected:'checkmark-circle-fill',unSelected:'checkmark-circle',color:'#409eff',isPayMethod:false},
			],
			payment_code: '',
			balance: 0, // 余额
			isSelected: false,
			orderedList: [],
			master: {} // 减免最终价格
		};
	},
	onReady() {
		// #ifdef MP-ALIPAY
		uni.hideHomeButton();
		uni.setNavigationBarColor({
			frontColor: '#000000', // 设置文本颜色
			backgroundColor: '#ffffff' // 设置背景颜色
		});
		// #endif
	},
	watch: {
		balance: {
			handler(val) {
				if (val < this.costPrice) {
					// 判断余额是否大于商品价格
					// #ifdef MP-ALIPAY
					this.payMethodsAlipay[1].isShow = false;
					// #endif
					// #ifdef MP-WEIXIN
					this.payMethods[1].isShow = false;
					// #endif
				} else {
					// #ifdef MP-ALIPAY
					this.payMethodsAlipay[1].isShow = true;
					// #endif
					// #ifdef MP-WEIXIN
					this.payMethods[1].isShow = true;
					// #endif
				}
			}
		}
	},
	computed: {
		...mapState(['userInfo']),
		costPrice() {
			// 原价
			return this.orderedList.reduce((a, b) => a + b.allAmount, 0).toFixed(2);
		},
		// 计算套菜选中的菜
		detailList() {
			const list = this.orderedList.map((item) =>
				item.detailList.map((row) => ({
					foodName: row.name,
					quantity: row.quantity
				}))
			);
			return list;
		}
	},
	onLoad(opt) {
		this.orderId = opt.orderId;
		this.onGetOrderedList();
	},
	methods: {
		// 获取已下单列表
		async onGetOrderedList() {
			const res = await this.$api.getOrderedList({
				orderId: this.orderId
			});
			// console.log(res)
			this.orderedList = res.data.detail || [];
			this.balance = res.data.balance || 0;
			this.remark = res.data.master.remark || '';
			this.master = res.data.master || {};
		},
		// 选中支付方式
		onCheckPay(index) {
			// #ifdef MP-WEIXIN
			this.payMethods.forEach((e) => {
				e.isPayMethod = false;
			});
			this.payMethods[index].isPayMethod = !this.payMethods[index].isPayMethod;
			this.payment_code = this.payMethods[this.payMethods.findIndex((e) => e.isPayMethod)].value;
			// #endif

			// #ifdef MP-ALIPAY
			this.payMethodsAlipay.forEach((e) => {
				e.isPayMethod = false;
			});
			this.payMethodsAlipay[index].isPayMethod = !this.payMethodsAlipay[index].isPayMethod;
			this.payment_code = this.payMethodsAlipay[this.payMethodsAlipay.findIndex((e) => e.isPayMethod)].value;
			// #endif
		},
		// 支付订单
		async createOrder() {
			pay(this.orderId, this.payment_code, this.master.classId, { userId: this.master.userId, couponId: this.master.couponId, amount: this.master.sumAllAmount || 0 });
		},
		onVoucher() {
			if (this.userInfo.id) {
				uni.navigateTo({
					url: '/pages/user/recharge/recharge'
				});
			} else {
				uni.navigateTo({
					url: '/pages/login/login'
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	box-sizing: border-box;
	height: 100vh;

	& > view {
		background-color: #fff;
		width: 94%;
		margin: 0 auto;
		padding: 20rpx;
		border-radius: 10rpx;
	}

	// 订单信息
	.order-info {
		.info-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 80rpx;
			border-bottom: 2rpx solid #eeeeee;
		}

		// 选中菜品
		.info-goods {
			padding: 20rpx 0;
			border-bottom: 2rpx solid #eeeeee;
			color: #b4b4b4;

			& > view {
				padding: 10rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				flex-wrap: wrap;
			}

			.goods {
				.left {
					display: flex;

					.goods-image {
						width: 100rpx;
						height: 100rpx;
						border-radius: 10rpx;
					}
				}
			}
		}

		.info-content {
			padding: 20rpx 0;
			border-bottom: 2rpx solid #eeeeee;

			& > view {
				display: flex;
				justify-content: space-between;
				align-items: center;
				line-height: 50rpx;
				color: #171717;
			}
		}

		.info-footer {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			height: 100rpx;
			font-size: 34rpx;
			color: #171717;
		}
	}

	// 支付信息
	.pay-order {
		margin-top: 20rpx;
		padding-bottom: 200rpx;

		& > view {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 80rpx;
			font-size: 30rpx;
		}

		.pay-method {
			padding: 0 20rpx;
			height: 100rpx;
			border: 1px solid #f5f5f5;
			border-radius: 10rpx;
		}
	}

	// 底部按钮
	.footer {
		background-color: #ffffff;
		z-index: 10;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 10rpx 30rpx 60rpx 30rpx;

		button {
			text-align: center;
			padding: 0;
			line-height: 90rpx;
			color: #111111;
			font-size: 30rpx;
			width: 280rpx;
			height: 90rpx;
			font-weight: bold;
			margin: 0;
			border-radius: 45rpx;
		}

		.button {
			background: linear-gradient(34deg, #f3c45d, #edac2f);
			border-radius: 45rpx;
		}
	}
}
</style>
